<template>
  <div class="edu-page-warp">
    <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="handleSearch"
            @reset="reset('queryTempletsForm')"
      >
        <el-form
        ref="queryTempletsForm"
        :rules="rules"
        :model="queryTempletsForm"
        label-position="right"
        label-width="80px"
      >
        <el-row :gutter="24" style="height: 50px;">
          <!-- <el-col :span="8">
            <el-form-item label="管理部门:">
              <el-select
                v-model="queryTempletsForm.projId"
                style="width: 100%"
                placeholder="选择管理部门"
                @change="queryTemplets"
              >
                <el-option
                  v-for="item in options.projId"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="年级:" prop="grade">
              <el-date-picker
                v-model="queryTempletsForm.grade"
                value-format="yyyy"
                type="year"
                placeholder="选择学年"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培养层次:" prop="trainingLevel">
              <el-select
                v-model="queryTempletsForm.trainingLevel"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options.trainingLevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培养类别：" prop="trainingCategory" style="height:33.89px;">
                <el-select
                    v-model="queryTempletsForm.trainingCategory"
                    style="width:100%"
                    placeholder="全部"
                    clearable multiple collapse-tags
                >
                    <el-option
                        v-for="item in options.trainingCategory"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    />
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('culture.scheme.degreeType') + ':'" prop="degreeType">
                <el-select
                    v-model="queryTempletsForm.degreeType"
                    style="width:100%"
                    clearable
                    placeholder="全部"
                >
                    <el-option
                        v-for="item in options.degreeType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学习形式:" prop="formLearning">
              <el-select
                v-model="queryTempletsForm.formLearning"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options.formLearning"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ConditionCard>
    <el-card shadow="never" body-style="padding: 24px;" class="card-margin">
      <h1 class="condition-title">{{ $t('common.text.list') }}</h1>
      <div class="div-main clearfix">
        <!-- <div class="float-left">
          <el-input
            v-model="queryTempletsForm.name"
            placeholder="培养方案名称"
            prefix-icon="el-icon-search"
            @change="handSearchChang"
          />
        </div> -->
         <div class="float-left" v-if="role == 4">
          <span>开启状态:</span>
           <el-switch v-model="openStatus" active-color="#13ce66" active-text="开"
								inactive-text="关"  active-value="1" inactive-value="0" @change="openStatusChange"></el-switch>
        </div>
        <!-- <div class="float-right">
          <el-button @click="batchEdit">{{ $t('common.btn.batch') + $t('common.btn.change') }}</el-button>
        </div> -->
      </div>
      <!-- <el-table
        :data="tableData"
        ref="cultureSchemesTable"
        stripe
        style="width: 100%"
        @selection-change="selectionChange"
        tooltip-effect="light"
      >
        <el-table-column label="方案名称" prop="name" min-width="330" show-overflow-tooltip/>
        <el-table-column label="年级" prop="grade" width="80"/>
        <el-table-column label="培养层次" prop="trainingLevelI18n" width="80"/>
        <el-table-column label="学院" prop="facultyI18n" min-width="200" show-overflow-tooltip/>
        <template>
          <el-table-column label="专业" prop="majorI18n" min-width="150" show-overflow-tooltip/>
          <el-table-column label="学习形式" prop="formLearningI18n" width="80"/>
          <el-table-column label="培养类别" prop="trainingCategoryI18n" width="95"/>
           <el-table-column label="学位类型" prop="degreeTypeI18n" width="80"/>
        </template>
        <el-table-column label="审核状态" prop="status" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 3" type="success" size="mini">发布</el-tag>
            <el-tag v-if="scope.row.status == 1" type="info" size="mini">草稿</el-tag>
            <el-tag v-if="scope.row.status == 2" type="warning" size="mini">审批中</el-tag>
            <el-tag v-if="scope.row.status == 4" type="danger" size="mini">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80px">
          <template slot-scope="scope">
            <el-button 
              :disabled="openStatus == 0 && role != 4" 
              :class="openStatus == 0 && role != 4?'selected-disabled':''"
              type="text" @click="editRow(scope.row.templateId,scope.row.id)">{{ $t('common.btn.batch') + $t('common.btn.change') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table> -->
      <el-table
        :data="tableData"
        ref="cultureSchemesTable"
        stripe
        style="width: 100%"
        @selection-change="selectionChange"
        :cell-class-name="cellStyleMethod"
        tooltip-effect="light"
      >
        <el-table-column label="方案名称" prop="name" min-width="330" show-overflow-tooltip/>
        <el-table-column label="年级" prop="grade" width="80"/>
        <el-table-column label="培养层次" prop="trainingLevelI18n" width="80"/>
        <el-table-column label="学院" prop="facultyI18n" min-width="200" show-overflow-tooltip/>
        <template>
          <el-table-column label="专业" prop="majorI18n" min-width="150" show-overflow-tooltip/>
          <el-table-column label="学习形式" prop="formLearningI18n" width="80"/>
          <el-table-column label="培养类别" prop="trainingCategoryI18n" width="120" show-overflow-tooltip/>
           <el-table-column label="学位类型" prop="degreeTypeI18n" width="80"/>
        </template>
        <el-table-column label="审核状态" prop="status" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 3" type="success" size="mini">发布</el-tag>
            <el-tag v-if="scope.row.status == 1" type="info" size="mini">草稿</el-tag>
            <el-tag v-if="scope.row.status == 2" type="warning" size="mini">审批中</el-tag>
            <el-tag v-if="scope.row.status == 4" type="danger" size="mini">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80px">
          <template slot-scope="scope">
            <el-button 
              :disabled="openStatus == 0 && role != 4" 
              :class="openStatus == 0 && role != 4?'selected-disabled':''"
              type="text" @click="editRow(scope.row.templateId,scope.row.id)">{{ $t('common.btn.batch') + $t('common.btn.change') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="edu-pagination">
        <div class="float-right">
          <el-pagination
            :current-page="queryCultureSchemesForm.pageNum_"
            :page-sizes="[20,50,100,500,1000]"
            :page-size="queryCultureSchemesForm.pageSize_"
            :total="queryCultureSchemesForm.total"
            layout="total, sizes, prev, pager, next, jumper"
            style="float: right;margin:0;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
    <ChangePlan
      :is-show="showBatchModifyDialog"
      :culture-schemes="cultureSchemes"
      :current-templet="currentTemplet"
      :schemed-id="schemedId"
      v-on:change-visible="changeVisible"
    />
  </div>
</template>
<script>
import * as API from 'common/src/api/culture/cultruescheme'
import UTILS from 'common/src/utils/utils'
import { queryDic, sortTrainingCategories } from 'common/src/api/dictionary'
import ChangePlan from './ChangePlan'
import { findCultureSchemeList } from 'common/src/api/culture/cultruescheme'
import { getPower, getTurn, insertPower } from 'common/src/api/culture/culturePlan'
import mixin from 'common/src/mixins/index';
export default {
  components: { ChangePlan },
  mixins: [mixin],
  data() {
    return {
      queryTempletsForm: {
        grade: '', // 年级
        trainingLevel: '', // 培养层次
        formLearning: '', // 学习形式
        name: '', // 名称
        trainingCategory:'',
        degreeType:'',
        pageNum_: 1,
        pageSize_: 20,
        total: 0,
        projId: '1',
        //professionCateGory: '',
        templateId: '',
        status:'3'
      },
      queryCultureSchemesForm: {
        name: '', // 名称
        pageNum_: 1,
        pageSize_: 20,
        total: 0,
        templateId: '',
      },
      options: {
        grade: [],
        trainingLevel: [],
        formLearning: [],
        trainingCategory: [], // 培养类别,
        degreeType:[],
        professionCateGory: [
          { value: '1', label: '专业大类' },
          { value: '2', label: '专业' },
        ],
        templates: [],
        campusProfessions: [],
        trainingCategoryId: [],
        projId: [],
      },
      tableData: [],
      showBatchModifyDialog: false,
      cultureSchemes: [],
      currentTemplet: '',
      schemedId:'',
      openStatus:'',//开启状态
      role:'',//角色
      rules: {
              grade: [
                      {
                        required: false,
                        message: "请选择年级",
                        trigger: "blur"
                      }
                    ],
            },
    }
  },

  created() {
    this.init()
  },
  methods: {
    cellStyleMethod({row, column, rowIndex, columnIndex}){
      if (columnIndex == 0) {
          return 'normal-cell';
      }
    },
    init() {
      this.initOptions();
      this.getRole();
      this.getTurn();
     // this.queryTempletsForm.grade=""
      this.handleSearch();
    },
    // queryTemplets() {
    //   let param = Object.assign({}, this.queryTempletsForm)
    //   findCultureSchemeList(this.queryTempletsForm).then((response) => {
    //     if (response.code === 200) {
    //       this.options.templates = trans(response.data.list)
    //       this.queryTempletsForm.total = response.data.total_
    //     }
    //   })
    //   function trans(list) {
    //     return list.map((item) => {
    //       return { label: item.name, value: item.id }
    //     })
    //   }
    // },
    getRole(){
      getPower().then((res) => {
        this.role = res.data.power
      })
    },
    getTurn(){
      getTurn("JHPLXG",this.global.projectId).then((res) => {
        this.openStatus = res.data.power
      })
    },
    initOptions() {
      const data = {
        lang: this.$store.getters.language || 'cn',
        type: 'allChild',
        keys: ['X_PYCC', 'K_XXXS', 'X_PYLB', 'X_GLBM','X_XWLX'],
      }
      queryDic(data).then((res) => {
        let params = {
          lang: this.$store.getters.language,
          keys: ["X_PYLB"]
      };
      sortTrainingCategories(params).then((res) => {
          this.options.trainingCategory = res.data.X_PYLB;
      });
        if (res.code === 200) {
          UTILS.fillSelect(
            {
              trainingLevel: 'X_PYCC',
              formLearning: 'K_XXXS',
              // trainingCategory: 'X_PYLB',
              degreeType: "X_XWLX",
              projId: 'X_GLBM',
            },
            res.data,
            this.options
          )
        }
      })
    },
    reset(ref) {
      this.$refs[ref].resetFields()
      this.tableData = []
    },
    handleSearch() {
    //  if (!this.queryTempletsForm.grade) {
      //  this.$message({
       //   type: 'warning',
       //   message: '请先选择年级!',
      //  })
      //  return
    //  }
      findCultureSchemeList(this.queryTempletsForm).then(
        (res) => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.queryCultureSchemesForm.total = res.data.total_
          }
        }
      )
    },
    openStatusChange(val){
      console.log(this.global.projectId);
      insertPower("JHPLXG",val,this.global.projectId)
    },
    selectionChange(list) {
      this.cultureSchemes = list.map((ele) => {
        return ele.id
      })
    },
    editRow(id,schemedId) {
      this.schemedId=schemedId;
      this.currentTemplet = id;
      this.showBatchModifyDialog = true
    },
    showModify() {
      // if (!this.queryCultureSchemesForm.templateId) {
      //   this.$message({
      //     type: 'warning',
      //     message: '请至少选择一个草稿状态的培养计划!',
      //   })
      //   return
      // }
    },
    // batchEdit() {
    //   this.showModify()
    // },
    handleSizeChange(val) {
        this.queryTempletsForm.pageSize_ = val;
        this.handleSearch();
    },
    handleCurrentChange(val) {
        this.queryTempletsForm.pageNum_ = val;
        this.handleSearch();
    },
    changeVisible() {
      this.showBatchModifyDialog = false
      this.cultureSchemes = []
      this.$refs.cultureSchemesTable.clearSelection()
    },
  },
}
</script>
<style lang="scss" scoped>
.selected-disabled {
    color: #909399;
}
.div-main {
        margin-bottom: 16px;
    }
</style>
